<template>
	<view>

		<!-- 头部 -->
		<view class="box_top">
			<!-- title -->
			<view class="top_title">
				<view style="position: absolute; left:0" @click="reback()">
					<uni-icons type="left" size="24"></uni-icons>
				</view>
				<view><text>一手房</text></view>
			</view>

			<!-- 搜索栏 -->
			<view class="searchbar">
				<!-- 地址 -->
<!--				<view class="">-->
<!--					<text> {{vuex_city==''?'选择':vuex_city}}</text>-->
<!--				</view>-->

				<!-- 搜索条 -->
				<uni-search-bar placeholder="上高印象二手房" cancel-text="取消" style="padding: 0;" bgColor="#fff"
					@focus="search">
					<!-- <uni-icons slot="searchIcon" color="#999999" size="14" type="home" /> -->
				</uni-search-bar>

				<!-- <u-icon name="scan" color="#2979ff" size="40"  @click="clickScan" style="margin-left: auto;"></u-icon> -->
			</view>


		</view>

		<!-- 搜索栏 -->
		<!--    <view class="search-bar">-->
		<!--      <view class="search-left">上高</view>-->
		<!--      <view class="search-middle">-->
		<!--        <input type="text" placeholder="上高印象 二手房" @click="search"/>-->
		<!--      </view>-->
		<!--      <view class="">-->
		<!--        <u-icon name="map" color="#2979ff" size="38"  @click="clickUniMap"></u-icon>-->
		<!--      </view>-->
		<!--    </view>-->
		<!--    <view class="statistic-container">-->
		<!--      <view class="statistic-item" v-for="(item, index) in statisticList" :key="index">-->
		<!--        <u-badge :text="item.value" :type="item.type" :size="40"></u-badge>-->
		<!--        <text class="statistic-label">{{ item.label }}</text>-->
		<!--      </view>-->
		<!--    </view>-->

		<!-- 数值标签栏 -->
		<view class="function-nav">
			<view class="nav-item">
				<view class="item-thumb"
					style="background:linear-gradient(to top,rgb(41, 190, 255),rgb(111, 211, 255))">
					<text>{{staData.newSaleCount}}</text>
				</view>
				<text>新售楼盘</text>
			</view>
			<view class="nav-item">
				<view class="item-thumb" style="background:linear-gradient(to top,rgb(255, 92, 68),rgb(255, 149, 140)">
					<text>{{staData.onSaleCount}}</text>
				</view>
				<text>在售楼盘</text>
			</view>
			<view class="nav-item">
				<view class="item-thumb" style="background:linear-gradient(to top,rgb(31, 199, 145),rgb(66, 237, 181)">
					<text>{{staData.thisMonthOpeningCount}}</text>
				</view>
				<text>新上楼盘</text>
			</view>
			<view class="nav-item">
				<view class="item-thumb" style="background:linear-gradient(to top,rgb(255, 148, 35),rgb(255, 190, 118)">
					<text>{{staData.upcomingSaleCount}}</text>
				</view>
				<text>待售楼盘</text>
			</view>
		</view>

		<!-- 榜单区域 -->
		<!--    <view class="rank-section">-->
		<!--      <view class="rank-tabs">-->
		<!--        <view class="tab active">销量榜</view>-->
		<!--        <view class="tab">人气榜</view>-->
		<!--        <view class="tab">关注榜</view>-->
		<!--        <view class="tab">热搜榜</view>-->
		<!--      </view>-->

		<!--      <view class="rank-info">-->
		<!--        <text>销量榜</text>-->
		<!--        <text>3月1日数据</text>-->
		<!--        <text class="more" @click="navigateTo(`/pages/house/top`)">查看全部</text>-->
		<!--      </view>-->
		<!--      <scroll-view scroll-x>-->
		<!--        <view class="tui-goods__list">-->
		<!--          <view class="tui-goods__item"  v-for="(item, index) in rankData" :key="index">-->
		<!--            <view class="thumb" >-->
		<!--              <image src="https://via.placeholder.com/500x400" mode="aspectFit" ></image>-->
		<!--            </view>-->
		<!--            <view class="content">-->
		<!--              <text>{{ item.name }}</text>-->
		<!--              <text>{{ item.area }}</text>-->
		<!--              <text>{{ item.price }}元/m</text>-->
		<!--            </view>-->
		<!--          </view>-->
		<!--        </view>-->
		<!--      </scroll-view>-->
		<!--    </view>-->


		<view class="body_list">
			<!-- 筛选栏  fixedTop -->
			<view class="dadropdown-box">
				<DaDropdownVue2 themeColor="#007aff" textColor="#333333" :duration="300"
					:dropdownMenu="dropdownMenuList" @confirm="handleConfirm" @close="handleClose" @open="handleOpen">
				</DaDropdownVue2>
			</view>

			<!-- 房源列表 -->
			<!-- <buildTemplate style="width: 100%;" :res='buildingList' :storeName='false' /> -->

			<view class="build_class">
				<view class="list_box" v-for="(item,index) in buildingList" @click="navigateToDetailPage(item)">
					<view class="box_left">
						<view class="left_image">
							<image :src="parseImage(item.images)" mode=""></image>
						</view>

					</view>
					<view class="box_right">
						<view class="right_box1">
							<view class="box1_name"><text>{{item.buildingName}}</text></view>
							<viwe class="box1_type"><text>新售楼盘</text></viwe>
						</view>

						<view class="right_box2">
							<view class="box2_colorfont"><text>{{item.price}}/平</text></view>
						</view>

						<view class="right_box3">
							<view class="box_font"><text>170套在售</text></view>
						</view>

						<view class="right_box4">
							<view class="box4_list">
								<text>大户型</text>
							</view>
							<view class="box4_list">
								<text>单价便宜</text>
							</view>
							<view class="box4_list">
								<text>配套完善</text>
							</view>

						</view>
					</view>
				</view>

			</view>
		</view>


		<!-- 上拉加载提示 -->
		<view v-if="hasMore" class="load-more-tip">上拉加载更多...</view>
		<view v-else class="no-more-tip">没有更多数据了</view>
	</view>
</template>

<script>
	import {
		getAllBuildings,
		staBuilding
	} from "@/api/building"
	import buildTemplate from '@/components/m-goods-list/buildList'
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
	import {
		GetApiData,
		GetCellApiData,
		GetFilterApiData
	} from './data'
	import {
		getAddressItemByCode
	} from '@/api/address'

	export default {
		components: {
			buildTemplate,
			DaDropdownVue2
		},
		data() {
			return {
        vuex_cityL:"",
				dropdownMenuList: [{
						title: '区域',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						value: '', // 默认内容2
						options: uni.getStorageSync('addressData'),
					},
					{
						title: '均价',
						type: 'cell',
						prop: 'god2',
						showAll: true,
						showIcon: true,
						options: [{
								label: '3000元以下',
								value: '1'
							},
							{
								label: '3000 - 5000元',
								value: '2'
							},
							{
								label: '5000 - 6000元',
								value: '3'
							},
							{
								label: '6000 - 7000元',
								value: '4'
							},
							{
								label: '7000 - 8000元',
								value: '5'
							},
							{
								label: '8000 - 9000元',
								value: '6'
							},
							{
								label: '9000 - 10000元',
								value: '7'
							},
							{
								label: '10000元以上',
								value: '8'
							},
						],
					},
					{
						title: '排序',
						type: 'cell',
						prop: 'god3',
						showAll: true,
						showIcon: true,
						options: [{
								label: '价格升序',
								value: '2'
							},
							{
								label: '价格降序',
								value: '3'
							},
							{
								label: '时间升序',
								value: '2'
							},
							{
								label: '时间降序',
								value: '3'
							},
							// { label: '热度排序', value: '3' },
						],
					},
					{
						title: '日期',
						type: 'daterange',
						prop: 'god4',
						value: {
							start: '',
							end: ''
						},
					},
				],
				staData: '',
				filterList: [{
						name: '区域',
						isOpen: false,
						options: ['不限', '上高区', '中心区', '开发区']
					},
					{
						name: '均价',
						isOpen: false,
						options: ['不限', '3000元以下', '3000 - 5000元', '5000 - 6000元', '6000 - 7000元', '7000 - 8000元',
							'8000 - 9000元', '9000 - 10000元', '10000元以上'
						]
					},
					{
						name: '更多',
						isOpen: false,
						options: ['不限', '新房', '二手房', '商铺']
					},
					{
						name: '排序',
						isOpen: false,
						options: ['默认排序', '价格升序', '价格降序', '热度排序']
					}
				],
				rankData: [{
						name: '龙井湖院1',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院2',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院3',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院4',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院5',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院6',
						area: 'xxx地区',
						price: '8000'
					}
				],
				buildingList: [],
				houseData: [],
				pageNumber: 1,
				pageSize: 10,
				hasMore: true,
				regionList: [],
				showDropdown: true,
				queryParams: {
					area: '',
					avgPrice: '',
					sort: '',
					startDate: '',
					endDate: '',
				}
			};
		},
		mounted() {

		},
		onLoad() {

			var address = uni.getStorageSync('address');
			if ("" != address) {

				getAddressItemByCode(address.adcode).then(res => {
					if ("" == uni.getStorageSync('addressData')) {
						uni.setStorageSync('addressData', res.data.data)
						//刷新此页面
						uni.reLaunch({
							url: '/pages/house/newHouse'
						});
					} else {
						uni.setStorageSync('addressData', res.data.data)
					}
				});
			}
			this.findBuildingList()
			this.staBuilding();
		},
		onPullDownRefresh() {
			this.pageNumber = 1;
			this.hasMore = true;
			this.buildingList = [];
			this.findBuildingList(() => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.hasMore) {
				this.loadMore();
			}
		},
		methods: {
			// 跳转到楼盘详情
			navigateToDetailPage(item) {


			  this.$u.route({
			    url: '/pages/store/buildingDetail',
			    params: {
			      id: item.id
			    }
			  })
			  // uni.navigateTo({
			  //   url: `/pages/building/buildingInfo?id=${item.id}&buildingId=${item.buildingId}`,
			  // });
			},
			parseImage(images) {

				// 这里可根据实际情况处理图片，示例直接返回
				return JSON.parse(images)[0];
			},
			// 返回上一步
			reback() {
				// 返回上一步
				uni.navigateBack({
					delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面
				});
			},
			search() {

        if (this.$options.filters.tipsToLogin()) {
          uni.navigateTo({
            url: `/pages/navigation/search/searchBuild`,
          });
        }

			},
			handleConfirm(v, selectedValue) {
				console.log('handleConfirm ==>', v, selectedValue)
			},
			handleClose(v, callbackMenuList) {

				if (v == 0) {
					this.queryParams.area = callbackMenuList[0].activeTitle;
				} else if (v == 1) {
					this.queryParams.avgPrice = callbackMenuList[1].activeTitle;
				} else if (v == 2) {
					this.queryParams.sort = callbackMenuList[2].activeTitle;
				} else if (v == 3) {

					if (null != callbackMenuList[3].value) {
						this.queryParams.startDate = callbackMenuList[3].value.start;
						this.queryParams.endDate = callbackMenuList[3].value.end
					} else {
						this.queryParams.startDate = null
						this.queryParams.endDate = null
					}

				}
				this.pageNumber = 1;
				this.hasMore = true;
				this.buildingList = []
				this.findBuildingList();
				console.log('handleClose ==>', v, callbackMenuList)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
			staBuilding() {
				staBuilding().then(res => {
					if (res.statusCode == 200) {

						this.staData = res.data;
					}
				})
			},
			findBuildingList(callback) {
				const queryParams = {
					...this.queryParams,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				};

				getAllBuildings(queryParams).then(res => {
					if (res.statusCode == 200) {
						if (res.data.length > 0) {
							this.buildingList = this.buildingList.concat(res.data);
							if (res.data.length < this.pageSize) {
								this.hasMore = false;
							} else {
								this.pageNumber++;
							}
						} else {
							this.buildingList = []
							this.hasMore = false;
						}
					}
					if (typeof callback === 'function') {
						callback();
					}
				})
			},
			toggleDropdown(index) {
				this.filterList[index].isOpen = !this.filterList[index].isOpen;
				// 关闭其他下拉菜单
				this.filterList.forEach((item, i) => {
					if (i !== index) item.isOpen = false;
				});
			},
			selectOption(filterIndex, optionIndex) {
				const selectedOption = this.filterList[filterIndex].options[optionIndex];
				this.filterList[filterIndex].name = selectedOption;
				this.filterList[filterIndex].isOpen = false;
				console.log(`选中筛选条件：${this.filterList[filterIndex].name}`);
				// 可在此处添加筛选逻辑（如调用接口更新数据）
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			loadMore() {
				this.findBuildingList();
			},
			// getRandomColor() {
			//   const letters = '0123456789ABCDEF';
			//   let color = '#';
			//   for (let i = 0; i < 6; i++) {
			//     color += letters[Math.floor(Math.random() * 16)];
			//   }
			//   return color;
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.box_top {
		width: auto;
		height: auto;
		padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
		background: linear-gradient(to bottom, rgb(204, 224, 255), rgb(245, 245, 245));
		position: sticky;
		top: 0;
		z-index: 20;
		padding-bottom: 20rpx;
		// border-bottom: 2rpx #d9d9d9 solid;
		// box-shadow: 0 0 0 2rpx #d9d9d97a;

		.top_title {
			padding-top: 28rpx;
			font-size: 32rpx;
			font-weight: 600;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.searchbar {
			width: 90%;
			margin: auto;
			margin-top: 24rpx;
			background-color: #FFF;
			display: flex;
			// justify-content: center;
			align-items: center;
			border-radius: 80rpx;
			padding: 0 24rpx;
		}


	}


	.body_list {
		// border: 1px red solid;
		border-radius: 16px 16px 0 0;
		background-color: #FFF;
		// overflow: hidden;
	}

	.build_class {
		// border: 1px red solid;
		padding-bottom: 40rpx;

		.list_box {
			width: 100%;
			height: auto;
			// border: 1px red solid;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.box_left {
				// border: 1px red solid;

				.left_image {
					width: 100px;
					height: 100px;
					border-radius: 11px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;

					}
				}


			}

			.box_right {
				margin-left: 16rpx;
				height: 100%;

				.right_box1 {
					display: flex;
					align-items: center;

					.box1_name {
						font-size: 28rpx;
						font-weight: 600;
					}

					.box1_type {
						margin-left: 22rpx;
						width: auto;
						height: auto;
						padding: 0 8rpx;
						font-size: 24rpx;
						border: 1px #d9d9d9 solid;
						font-weight: 600;
					}
				}

				.right_box2 {
					margin-top: 8rpx;

					.box2_colorfont {
						font-size: 32rpx;
						font-weight: 800;
						color: rgb(255, 53, 40);
					}
				}

				.right_box3 {
					margin-top: 8rpx;

					.box_font {
						font-size: 24rpx;
						font-weight: 600;

					}
				}

				.right_box4 {
					display: flex;
					align-items: center;
					margin-top: 12rpx;


					.box4_list {
						height: auto;
						width: auto;
						background-color: rgb(237, 244, 255);
						color: rgb(88, 107, 144);
						padding: 4rpx 24rpx;
						border-radius: 16rpx;
						font-size: 24rpx;
						font-weight: 600;
						margin-right: 18rpx;
					}
				}
			}
		}
	}

	.dadropdown-box {
		// border: 1px red solid;
		// background-color: red;
	}

	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}

	.search-left {
		color: #666;
		font-size: 28rpx;
		margin-right: 15rpx;
	}

	.search-middle {
		flex: 1;
		/* 新增样式，让搜索框自动扩展以占据剩余空间 */
	}

	.search-middle input {
		width: 100%;
		height: 60rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}

	.search-right {
		width: 60rpx;
		height: 60rpx;
	}

	.number-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.tag {
		width: calc(25% - 20rpx);
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx 25rpx;
		margin: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
	}

	.tag text:first-child {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.sub-text {
		font-size: 28rpx;
		color: #666;
	}

	.function-nav {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.nav-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 20rpx 0;
	}

	.nav-item image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.nav-item text {
		font-size: 28rpx;
		color: #666;
		font-size: 24rpx;
		font-weight: 600;
	}

	.nav-item .item-thumb>text {
		color: #FFF;

	}

	.rank-section {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.rank-tabs {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.tab {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 10rpx;
		margin-right: 15rpx;
	}

	.active {
		background-color: #f0f0f0;
		color: #333;
	}

	.rank-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		font-size: 26rpx;
		color: #666;
	}

	.more {
		color: #007AFF;
	}

	.rank-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.rank-item {
		width: 33.33%;
		padding: 0 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.thumb {
		width: 120rpx;
		height: 120rpx;
		background-color: #f0f0f0;
		margin-bottom: 10rpx;
	}

	.content text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.filter-bar {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.filter-item {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.filter-item text {
		width: 100rpx;
		color: #666;
		font-size: 28rpx;
	}

	.filter-value {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.filter-value text {
		color: #999;
		font-size: 28rpx;
	}

	.price-range {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.price-range text {
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		background-color: #f0f0f0;
		color: #666;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.house-list {
		background-color: #fff;
	}

	.house-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.house-thumb {
		width: 120rpx;
		height: 120rpx;
		background-color: #f0f0f0;
		margin-right: 20rpx;
	}

	.house-content {
		flex: 1;
	}

	.price-info {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.price-info text:first-child {
		font-size: 32rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.price-info text:last-child {
		font-size: 28rpx;
		color: #666;
	}

	.agency {
		color: #999;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}

	.tags text {
		background-color: #f0f0f0;
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #666;
	}

	.desc {
		color: #666;
		font-size: 26rpx;
	}

	.tui-goods__list {
		display: flex;
		align-items: center;
	}

	.tui-goods__item {
		background-color: #fff;
		width: 150rpx;
		height: 230rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		margin-right: 18rpx;
	}

	.filter-container {
		background-color: #ffffff;
		padding: 15rpx 10rpx;
	}

	.filter-row {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: -5rpx;
	}

	.filter-item {
		margin: 5rpx;
		padding: 8rpx 12rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		min-width: 80rpx;
		text-align: center;
		position: relative;
	}

	.filter-item text {
		font-size: 26rpx;
		color: #333;
	}

	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #ffffff;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding: 10rpx;
		min-width: 100%;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.dropdown-item {
		padding: 8rpx 15rpx;
		font-size: 28rpx;
		color: #666;
		cursor: pointer;
	}

	.dropdown-item:hover {
		background-color: #f5f5f5;
	}

	.load-more-tip {
		text-align: center;
		padding: 20rpx;
		color: #666;
	}

	.no-more-tip {
		text-align: center;
		padding: 20rpx;
		color: #999;
	}

	.item-thumb {
		width: 46px;
		height: 30px;
		border-radius: 44%;
		background-color: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: white !important;
		font-size: 20rpx;
	}
</style>